<template>
  <div class="detailPage">
    <div class="detailPage-one"></div>
    <van-tabbar v-model="active" active-color="#000" inactive-color="#000">
      <van-tabbar-item icon="arrow-left" @click="Return()"></van-tabbar-item>
      <van-tabbar-item
        icon="comment-o"
        :badge="shuju.comments"
        @click="comment()"
      ></van-tabbar-item>
      <van-tabbar-item
        :icon="img"
        :badge="shuju.popularity"
        @click="like()"
      ></van-tabbar-item>
      <van-tabbar-item icon="star-o" @click="collect()"></van-tabbar-item>
      <van-tabbar-item>
        <van-cell icon="share-o" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </van-tabbar-item>
    </van-tabbar>
    <div class="aaa"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Notify } from "vant";
export default {
  name: "DetailPage",
  data() {
    return {
      id: "",
      img: "good-job-o",
      pid: 0,
      active: 0,
      detailPage: [],
      shuju: [],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },

  created() {
    this.id = this.$route.params.id;
    this.getHotProductOne(this.id);
    this.getHotProductTwo(this.id);
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
  },
  methods: {
    Return() {
      Notify({ type: "primary", message: "返回" });
      this.$router.go(-1);
    },
    comment() {
      Notify({ type: "primary", message: "评论" });
      let id = this.id;

      this.$router.push({ name: "Comment", params: { id } });
    },
    like() {
      if (this.img == "good-job-o") {
        this.shuju.popularity = this.shuju.popularity + 1;
        Notify({ type: "primary", message: "点赞成功" });
        this.img = 'good-job';
      }else{
        this.shuju.popularity = this.shuju.popularity - 1;
        Notify({ type: "primary", message: "取消成功" });
        this.img = 'good-job-o';
      }
    },
    collect() {
      Notify({ type: "primary", message: "尚未登陆" });
      this.$router.push({ name: "SignIn" });
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    getHotProductOne(id) {
      //发起请求
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/zhihudaily/story/" + id,
        //如果get请求, 请求参数需要写在params字段中
        // params: {
        //   page: this.shu,
        // },
      })
        .then((result) => {
          //存储数据
          this.detailPage = result.data.story;

          let one = document.querySelector(".detailPage-one");
          one.innerHTML = this.detailPage.body;
          let headline = document.querySelector(".headline");
          headline.innerHTML = `
            <img src="${this.detailPage.image}"/>
          `;
        })
        .catch((err) => {});
    },
    getHotProductTwo(id) {
      //发起请求
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/zhihudaily/story/" + id + "/extra",
        //如果get请求, 请求参数需要写在params字段中
        // params: {
        //   page: this.shu,
        // },
      })
        .then((result) => {
          // console.log(result);
          //存储数据
          this.shuju = result.data;
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="less" scoped>
@import "http://news-at.zhihu.com/css/news_qa.auto.css?v=4b3e3";
.detailPage-one {
  width: 100%;
  height: 100%;
}
.aaa {
  width: 100%;
  height: 50px;
}
.aa {
  font-size: 16px;
  margin-bottom: 6px;
}
::v-deep .van-icon-share-o:before {
  font-size: 20px;
}
</style>